<!DOCTYPE html>
<html lang="en">

<head>
    {{ template "commonHeader.html" .}}
    <link href="/static/css/dropdown.css" rel="stylesheet">
    <link href="/static/css/progress-bar.css" rel="stylesheet">
    <link href="/static/css/led.css" rel="stylesheet"> {{ if eq .uInfo.Status 0}}
    <link href="/static/css/loading.css" rel="stylesheet"> {{ end }}
</head>

<body id="top" class="font-hei">

    {{ template "nav.html" .}}

    <div class="wrapper">
        <div class="hero">
            <div class="container text-center">

                <form class="form" id="create-form" action="/panel/create" method="post" {{ if ne .uInfo.Status 0}} style="display: none"
                    {{ end }}>
                    <h1 id="form-title">创建服务</h1>
                    <span id="form-type" class="custom-dropdown big">
                        <select id="server-type" name="server-type">
                            <option value="-1">请选择服务端类型</option>
                            {{ range $i, $v := .servers }}
                            <option value="{{$v}}">{{$v}}</option>
                            {{ end }}
                        </select>
                    </span>
                    <br/>
                    <br/>
                    <span id="form-method" class="custom-dropdown big">
                        <select id="method" name="method">
                            <option value="-1">请选择加密方式</option>
                        </select>
                    </span>
                    <br/>
                    <br/>
                    <button id="create-btn" class="common-btn">创建</button>
                </form>
                <div class="boxLoading"></div>

                <div class='infobox multiline' {{ if eq .uInfo.Status 0 }} style="display: none"
                    {{ end }}>
                    <div class="header-bar text-left">
                        <span>账户概览</span>
                        <button type="button" class="btn btn-link btn-sm" id="icon-qrcode"><i class="iconfont icon-qrcode"></i></button>
                    </div>
                    <div id="account-detail" class="basic-slide">
                        <div class="qrcode-wrap">
                            <div id="qrcode-canvas"></div>
                            <span class="clipboard qrcode-url" id="basic-addon2" data-clipboard-action="copy"  data-clipboard-text="{{.uInfo.ServiceURL}}" onClick="toastr.success('复制成功')">点击复制链接</span>
                        </div>
                        <div class="basic-slide_wrap">
                            <div class="basic-slide_line">
                                <input class="basic-slide_input" id="host" type="text" value="{{ .uInfo.Host }}" readonly />
                                <label for="name" class="basic-slide_label">主机</label>
                            </div>
                            <div class="basic-slide_line">
                                <input class="basic-slide_input" id="port" type="text" value="{{ .uInfo.ServicePort }}" readonly />
                                <label for="name" class="basic-slide_label">端口</label>
                            </div>
                            <div class="basic-slide_line">
                                <input class="basic-slide_input" id="encrypt" type="text" value="{{ .uInfo.ServiceMethod }}" readonly />
                                <label for="name" class="basic-slide_label">加密</label>
                            </div>
                            <div class="basic-slide_line">
                                <input class="basic-slide_input" id="pwd" type="text" value="{{ .uInfo.ServicePwd }}" readonly />
                                <label for="name" class="basic-slide_label">密码</label>
                            </div>
                        </div>
                        <div class="basic-slide_wrap">
                            <div class="basic-slide_line">
                                <input class="basic-slide_input" id="types" type="text" value="{{ .uInfo.ServiceType }}" readonly />
                                <label for="name" class="basic-slide_label">类型</label>
                            </div>
                            <div id="ssr_info" {{ if ne .uInfo.ServiceType "SSR" }} style="display: none" {{ end }}>
                                <div class="basic-slide_line">
                                    <input class="basic-slide_input" id="protocol" type="text" value="auth_aes128_md5" readonly />
                                    <label for="name" class="basic-slide_label">协议</label>
                                </div>
                                <div class="basic-slide_line">
                                    <input class="basic-slide_input" id="protocol-param" type="text" value="32" readonly />
                                    <label for="name" class="basic-slide_label">协参</label>
                                </div>
                                <div class="basic-slide_line">
                                    <input class="basic-slide_input" id="obfs" type="text" value="tls1.2_ticket_auth_compatible" readonly />
                                    <label for="name" class="basic-slide_label">混淆</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="middle-bar text-left">服务状态</div>
                    <div class="row">
                        <div class="offset-md-3 col-md-6 text-center">
                            <section class="status" id="service-status">
                                {{ if eq .uInfo.Status 1 }}
                                <div class="led green"></div>
                                <span>运行中</span> {{ end }} {{ if eq .uInfo.Status 2 }}
                                <div class="led yellow"></div>
                                <span>已停止</span> {{ end }}
                                <span>到期: {{ .uInfo.Expired }}</span>
                                <section class="status">
                                </section>
                            </section>
                        </div>
                        <div class="col-md-6 text-center">
                        </div>
                    </div>
                    <div class="progressbar" data-perc="{{ .uInfo.PackageLeftPercent }}">
                        <div class="bar">
                            <span></span>
                        </div>
                        <div class="label">
                            <span></span>
                        </div>
                    </div>
                    <div class="stat-bar">
                        <div class="a-third">
                            <div class="stat" id="package-limit">{{ .uInfo.PackageLimit }}
                                <up>GB</up>
                            </div>
                            <div class="stat-value">月流量</div>
                        </div>
                        <div class="a-third">
                            <div class="stat" id="package-used">{{ .uInfo.PackageUsed }}
                                <up>GB</up>
                            </div>
                            <div class="stat-value">已使用</div>
                        </div>
                        <div class="a-third no-border">
                            <div class="stat" id="package-left">{{ .uInfo.PackageLeft }}
                                <up>GB</up>
                            </div>
                            <div class="stat-value">剩余</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <ul class="bg-bubbles">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        {{ template "commonFooter.html" .}}
        <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
        <script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"></script>
        <script src="/static/js/panel.js"></script>
        <script>
            ssMethods = {{.ss_methods}};
            ssrMethods = {{.ssr_methods}};

            $(document).ready(function () {
                new Clipboard('.clipboard');
                $('[data-toggle="popover"]').popover()
                $('#qrcode-canvas').qrcode({width: 200,height: 200,text: "{{ .uInfo.ServiceURL }}"});
                Panel.init();
                Header.init();

                $('.progressbar').each(function () {
                    var t = $(this);
                    var dataperc = t.attr('data-perc'),
                        barperc = Math.round(dataperc * 3.56);
                    t.find('.bar').animate({
                        width: barperc
                    }, dataperc * 25);
                    t.find('.label').append('<div class="perc"></div>');

                    function perc() {
                        var length = t.find('.bar').css('width'),
                            perc = Math.round(parseInt(length) / 3.56),
                            labelpos = (parseInt(length) - 15);
                        t.find('.label').css('left', labelpos);
                        t.find('.perc').text(perc + '%可用');
                    }
                    perc();
                    setInterval(perc, 0);
                });
            });
        </script>
</body>

</html>
